<template>
	<view>
		<view class="top">
			<u-navbar title="渠道中心" :fixed='false' :border='false' bgColor="" :autoBack="true">
				<view class="" @click="$goTo('/pages_my/yjdetail/yjdetail')" slot='right' style="color: #51677D;">
					佣金明细
				</view>
			</u-navbar>
			
		</view>
		<view class="yongjin">
			<image class="qdbg" src="/static/pages_my/qdbg.png" mode="widthFix"></image>
			<view class="flex" style="justify-content: space-between; align-items: center; position: relative; padding: 20rpx;">
				<view class="flex" style="color: #fff; align-items: center;">
					<view class="u-font-bold u-font-36 u-m-l-20">酒店</view> <text class="u-m-lr-10">/</text> <text>渠道分销商</text>
				</view>
				<view class="flex erweima u-m-t-10" @click="$goTo('/pages_my/invite/invite')">
					<image src="../../static/pages_my/ewm.png" mode=""></image>
					<text>查看渠道码</text>
					<u-icon class="u-m-lr-10" color="#00CE9B" name='play-right-fill'></u-icon>
				</view>
			</view>
			<view class="yongjincontent ">
				<view class="yongjincontent_top flex">
					<view class="yongjincontent_top_left flex">
						<text>可提现佣金(元)</text>
						<text class="u-font-bold u-font-44">{{info.money }}</text>
					</view>
					<view class="yjbtn" @click="$goTo('/pages_my/tixian/tixian')">
						去提现
					</view>
				</view>
				<view class="yongjincontent_bottom flex">
					<view class="yongjincontent_bottom_item flex">
						<text class="u-font-bold u-font-40" >{{info.order_price}}</text>
						<text style="color: #ADB1BF;" class="u-font-24" >总金额(元)</text>
					</view>
					<u-line direction="col" length="30rpx" :hairline='false' color="#EAEAEA"></u-line>
					<view class="yongjincontent_bottom_item flex">
						<text class="u-font-bold u-font-40" >{{info.rebate_price}}</text>
						<text style="color: #ADB1BF;" class="u-font-24" >总佣金(元)</text>
					</view>
				</view>
			</view>
			<text class="u-font-bold u-font-30" >数据统计</text>
			<view class="allnum flex">
				<view class="allnum_item flex">
					<text>总扫码</text>
					<text style="color: #7473FF;" class="u-font-40 u-font-bold">{{info.scan}}</text>
				</view>
				<view class="allnum_item flex">
					<text>总单量</text>
					<text style="color: #D725FA;" class="u-font-40 u-font-bold">{{info.count}}</text>
				</view>
				<view class="allnum_item flex">
					<text>总金额(元)</text>
					<text style="color: #E91919;" class="u-font-40 u-font-bold">{{info.order_price}}</text>
				</view>
			</view>
			<view class="lastnum">
				<view class="lastnum_top flex">
					<view class="lastnum_top_item flex">
						<text style="color: #ADB1BF;">今日扫码</text>
						<text class="u-font-40 u-font-bold">{{info.day_scan}}</text>
					</view>
					<view class="lastnum_top_item flex">
						<text style="color: #ADB1BF;">今日下单</text>
						<text class="u-font-40 u-font-bold">{{info.day_count}}</text>
					</view>
					<view class="lastnum_top_item flex">
						<text style="color: #ADB1BF;">今日金额(元)</text>
						<text class="u-font-40 u-font-bold">{{info.day_order_price}}</text>
					</view>
				</view>
				<view class="lastnum_top flex" style="background-color: #FBFBFE;">
					<view class="lastnum_top_item flex">
						<text style="color: #ADB1BF;">昨日扫码</text>
						<text class="u-font-40 u-font-bold">{{info.yesterday_scan}}</text>
					</view>
					<view class="lastnum_top_item flex">
						<text style="color: #ADB1BF;">昨日下单</text>
						<text class="u-font-40 u-font-bold">{{info.yesterday_count}}</text>
					</view>
					<view class="lastnum_top_item flex">
						<text style="color: #ADB1BF;">昨日金额(元)</text>
						<text class="u-font-40 u-font-bold">{{info.yesterday_order_price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{}
			};
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				this.$api.post('/channelinfo',{}).then(res=>{
					
					this.info = res.data;
				})
			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-navbar__content {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    height: 44px;
	    background-color: rgba(1, 1, 1, 0);
	    position: relative;
	    justify-content: center;
	}
	.top {
		background-image: linear-gradient(to bottom, #B3FFEC 0%, #E6FDF8 100%);
		height: 579rpx;
		overflow: hidden;
		width: 100vw;
	}
	.yongjin{
		.qdbg{
			height: 100%;
			position: absolute;
			width: 100%;
		}
		position: relative;
		margin: -410rpx auto 0;
		// background-image: url('/static/pages_my/qdbg.png');
		width: 95vw;
		box-sizing: border-box;
		height: 545rpx;
		padding: 60rpx 0;
		.erweima{
			position: relative;
			color: $uni-primary;
			align-items: center;
			>image{
				width: 22rpx;
				height: 22rpx;
				margin-right: 20rpx;
			}
		}
		.yongjincontent{
			position: relative;
			width: 90%;
			margin: 50rpx auto;
			height: 345rpx;
			border-radius: 30rpx;
			background-color: #F7F7FA;
			.yongjincontent_top{
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				width: 100%;
				// height: 183rpx;
				box-sizing: border-box;
				background-color: $uni-primary;
				border-radius: 30rpx;
				.yongjincontent_top_left{
					flex-direction: column;
					justify-content: space-between;
					color: #fff;
					height: 120rpx;
				}
				.yjbtn{
					background-color: #fff;
					border-radius: 40rpx;
					color: $uni-primary;
					width: 150rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
				}
			}
			.yongjincontent_bottom{
				justify-content: space-around;
				align-items: center;
				margin-top: 30rpx;
				.yongjincontent_bottom_item{
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					flex-direction: column;
				}
			}
		}
		.allnum{
			width: 80vw;
			height: 164rpx;
			margin:50rpx auto;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			align-items: center;
			justify-content: space-around;
			.allnum_item{
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				height: 120rpx;
			}
		}
		.lastnum{
			width: 80vw;
			height: 348rpx;
			margin:50rpx auto;
			// padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			.lastnum_top{
				align-items: center;
				justify-content: space-around;
				height: 174rpx;
				border-radius: 30rpx;
				.lastnum_top_item{
					align-items: center;
					justify-content: space-between;
					flex-direction: column;
					height: 120rpx;
				}
			}
		}
	}
</style>